import React from 'react'
/*
  1、如果要在react中完成样式隔离，需要如下操作
  1）命名一个xx.module.scss    webpack要求
  2) 在需要的组件中通过ES6方式进行导入，导入的格式如下
  import 模块名 from 'xx.module.scss的路径'
  3) 在页面的标签中引用,引用的格式<标签名 className={模块名.类样式名称}/>或者className={模块名['类样式名称']}/>
*/
/*
  2.antd中Form组件的使用
  2.1 触发Form中的onFinish事件的回调函数它的的条件
  1）必须让<Button>的类型是submit,具体的做法是<Button htmlType="submit">
  2) 如何获取表单中文本框或者密码中的数据，需要在<Form.Item>设置name属性
*/
import loginStyle from '../assets/css/login.module.scss'
import {Form,Input,Button,message} from 'antd'
import {useNavigate} from 'react-router-dom'
import api from '../api'
export default function Login() {
  const [messageApi,contextHolder]=message.useMessage()
  const nav=useNavigate()
  const login=async values=>{
      const {code,message,token}=await api.users.login(values)
      if(code){
        messageApi.open({
          type:'success',
          content:message
        })
        //保存token到localStorage中
        localStorage.setItem('token',token)
        //跳转到后台首页
        nav('/home')
      }else{
        messageApi.open({
          type: 'error',
          content: '用户名或者密码有误',
        });
      }
  }
  return (

    <div>
        {contextHolder}
        <div className={loginStyle.container}>
           <div className={loginStyle['login-box']}>
              <Form onFinish={login}>
                  <Form.Item 
                      name="username"
                      rules={[
                        {
                          required:true,
                          message:'账号不能为空'
                        }
                      ]}
                      className={loginStyle.item}>
                      <Input className={loginStyle.txt}></Input>
                  </Form.Item>
                  <Form.Item 
                     name="password"
                     rules={[
                      {
                        required:true,
                        message:'密码不能为空'
                      }
                      ]}>
                      <Input.Password></Input.Password>
                  </Form.Item>
                  <Form.Item className={loginStyle.item}>
                      <Button type='primary' htmlType='submit' className={loginStyle.loginBtn}>登录</Button>
                  </Form.Item>
              </Form>
           </div>
        </div>
    </div>
  )
}
